<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Расписание - MultiFeeder</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

    <style type="text/css" media="screen">
        @media (max-width: 1000px) {
            .card-title {
                font-size: 250%;
            }

            .card-subtitle {
                font-size: 200%;
            }

            .card-link {
                font-size: 180%;
                width: 250px;
            }

            .btn {
                font-size: 180%;
            }
        }

    </style>
</head>
<body>

<div class="container text-center">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-5">
            {% for item in items %}

                <div class="card mb-3 mt-3">
                    <div class="card-body">
                        <h5 class="card-title">{{ item.time }}</h5>
                        <h6 class="card-subtitle mb-2 text-body-secondary">{{ item.length }}сек</h6>
                        <a href="/edit?id={{ item.id }}" class="card-link btn btn-primary">Редактировать</a>
                        <a href="/delete?id={{ item.id }}" class="card-link btn btn-danger">Удалить</a>
                    </div>
                </div>

            {% endfor %}

            <a href="/add" class="btn btn-primary mb-3" style="width: 100%">Добавить</a>

            <form method="post" action="/feed">
                <div class="input-group mt-4">
                    <div class="form-floating">
                        <input
                                id="lengthInput"
                                name="length"
                                type="number"
                                step="0.1"
                                class="form-control form-control-lg"
                                min="1"
                                max="10"
                                value="5"
                                required
                                placeholder="Длительность"
                        >
                        <label for="lengthInput">Длительность</label>
                    </div>
                    <button class="btn btn-primary" type="submit">Покормить сейчас</button>
                </div>
            </form>


        </div>
    </div>
</div>


</body>
</html>